<template>
  <div class="new-wrap">
    <h2>合作伙伴</h2>
    <div class="news">
      <router-link to='/' tag='div' class="item1" v-for="(item,index) of partnerList1" :key="'a'+index">
          <img :src="item" alt="">
      </router-link>
      <router-link to='/' tag='div' class="item1 item2" >
          <img :src="partnerList8[0]" alt="">
      </router-link>
    </div>
    <div class="news">
      <router-link to='/' tag='div' class="item1 " v-for="(item,index) of partnerList2" :key="'b'+index">
          <img :src="item" alt="">
      </router-link>
    </div>
    <div class="news list3">
      <router-link to='/' tag='div' class="item1" v-for="(item,index) of partnerList3" :key="'c'+index">
          <img :src="item" alt="">
      </router-link>
      <router-link to='/' tag='div' class="item1 item3" >
          <img :src="partnerList8[1]" alt="">
      </router-link>
    </div>
    <div class="news list4">
      <router-link to='/' tag='div' class="item1" v-for="(item,index) of partnerList4" :key="'d'+index">
          <img :src="item" alt="">
      </router-link>
    </div>
    <div class="news list5">
      <router-link to='/' tag='div' class="item1" v-for="(item,index) of partnerList5" :key="'e'+index">
          <img :src="item" alt="">
      </router-link>
    </div>
    <div class="news list6">
      <router-link to='/' tag='div' class="item1" v-for="(item,index) of partnerList6" :key="'f'+index">
          <img :src="item" alt="">
      </router-link>
    </div>
    <div class="news list7">
      <router-link to='/' tag='div' class="item1" v-for="(item,index) of partnerList7" :key="'g'+index">
          <img :src="item" alt="">
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Partner',
  data () {
    return {
      partnerList1: [
        require('@/assets/img/index/partner-1.jpg'),
        require('@/assets/img/index/partner-2.jpg'),
        require('@/assets/img/index/partner-3.jpg')
      ],
      partnerList2: [
        require('@/assets/img/index/partner-5.jpg'),
        require('@/assets/img/index/partner-6.jpg'),
        require('@/assets/img/index/partner-7.jpg'),
        require('@/assets/img/index/partner-8.jpg'),
        require('@/assets/img/index/partner-9.jpg')
      ],
      partnerList3: [
        require('@/assets/img/index/partner-10.jpg'),
        require('@/assets/img/index/partner-36.jpg'),
        require('@/assets/img/index/partner-12.jpg'),
        require('@/assets/img/index/partner-13.jpg')
        // require('@/assets/img/index/partner-14.jpg')
      ],
      partnerList8: [
        require('@/assets/img/index/partner-4.jpg'),
        require('@/assets/img/index/partner-14.jpg')
        // require('@/assets/img/index/partner-15.jpg')
      ],
      partnerList4: [
        require('@/assets/img/index/partner-16.jpg'),
        require('@/assets/img/index/partner-15.jpg'),
        require('@/assets/img/index/partner-17.jpg'),
        require('@/assets/img/index/partner-18.jpg'),
        require('@/assets/img/index/partner-19.jpg'),
        require('@/assets/img/index/partner-21.jpg')
      ],
      partnerList5: [
        require('@/assets/img/index/partner-22.jpg'),
        require('@/assets/img/index/partner-23.jpg'),
        require('@/assets/img/index/partner-24.jpg'),
        require('@/assets/img/index/partner-20.jpg'),
        require('@/assets/img/index/partner-26.jpg')
      ],
      partnerList6: [
        require('@/assets/img/index/partner-27.jpg'),
        require('@/assets/img/index/partner-28.jpg'),
        require('@/assets/img/index/partner-29.jpg'),
        require('@/assets/img/index/partner-30.jpg'),
        require('@/assets/img/index/partner-31.jpg')
      ],
      partnerList7: [
        require('@/assets/img/index/partner-25.jpg'),
        require('@/assets/img/index/partner-32.jpg'),
        require('@/assets/img/index/partner-33.jpg'),
        require('@/assets/img/index/partner-34.jpg'),
        require('@/assets/img/index/partner-35.jpg')
      ]

    }
  }

}
</script>

<style lang="scss" scoped>
.new-wrap{
  margin-bottom: 50px;
  h2{
    font-size: 30px;
    color: #232323;
    padding: 70px 0 0px 0;
    text-align: center;
    font-weight: bold;
  }
  .news{
    width: 750px;
    height: 100%;
    box-sizing: border-box;
    padding:30px 35px 0;
    display: flex;
    .item1{
      img{
        display: block;
        height: 27px;
      }
    }
    .item2{
      img{
        margin-left: 10px;
      }
    }
    .item3{
      img{
        // margin-left: 20px;
      }
    }
  }
  .list3{
    img{
      margin-right: 6px
    }
  }
  .list5{
    .item1 img{
      margin-right: 3px;
      height: 30px;
    }
  }
  .list6{
    img{
      margin-right: 4px;
    }
  }
  .list4{
    img{
      margin-right: 8px;
    }
  }
  .list7{
    img{
      margin-right: 4px;
    }
  }
}

</style>
